<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="css/style.css">
        <style>

            /* 
            css选择器
                id选择器 唯一值更改    #id名{}
                类选择器 某一类型的筛选  .类名{}
                标签选择器 大范围的筛选     标签名{}
            
            */

            
            div{
                color: linear-gradient(to left, pink, skyblue);
            } 
            #test1{
        
                font-size: large;
            } 
            .red{
                background-color: red;
            }
            .red-font{
                color: pink;
            }
            .beautiful{
                color: rgb(52, 36, 67);
                font-size: 122px;
            }
            /*后代选择器  只要是后代就行*/
           /* div p{ 
                font-size: 70px;
            } */
              /*子代选择器  只有儿子行*/
            /* div>p{
                font-size: 70px;
            } */   
             /* 交集选择器 */ 
             p.num {
                font-size: 70px;
             }

             p,div{
                background-image: linear-gradient(to left, pink, skyblue);
             }

             	/*让超链接点击之前是红色*/
            a:link{
                color:red;
            }

            /*让超链接点击之后是绿色*/
            a:visited{
                color:orange;
            }

            /*鼠标悬停，放到标签上的时候*/
            a:hover{
                color:linear-gradient(to left, pink, skyblue);
            }

            /*鼠标点击链接，但是不松手的时候*/
            a:active{
                color:black;}

            

        
        </style>
       
    </head>


    <body >

        <a href="http://">百度</a>

        <span>4567</span>
       
        <div>
            <spen>

                <p>123</p>

            </spen>


            <p>789</p>
            <p>789</p>

           

        </div>
        <p>456</p>

        <p class="num">456</p>

        <div class="num">456</div>
        <p>456</p>

        <button onclick="stop()">停止</button>

        <script>

            /* dom  对当前页面的元素进行操作的一种webapi */


            //选择一个元素作为dom点,node element    
            let dom  = document.querySelector('div');

            console.log(dom);
            //对其中内容进行操作
            dom.classList.add('red')

            dom.id = '123'
            dom.href = 'http://127.0.0.1:8000/wwh'

            dom.addEventListener('click',function(){

                alert('奥斯卡大奖和凯撒很多刷卡机')

                window.location = 'http://127.0.0.1:8000/wwh'

            })

            let count = 0
            let in_id = setInterval(function(){
                console.log(count++);
            },1000)

            function stop(){
                clearInterval(in_id)
            }

            

            console.log(dom);
        </script>
        
    </body>
</html>